import React, { ReactElement } from 'react'
import cn from 'classnames'

import { noop } from 'helpers/fn'
import styles from './style.module.css'

function Table(value) {
  const { showHeader = true, columns, data, onDoubleClick = noop, isRecordRowDisabled } = value
  return (
    <div className={styles.root}>
      {showHeader && (
        <div className={styles.header}>
          {columns.map(({ title, width }, index) => {
            return (
              <div key={index} style={{ width }}>
                {title}
              </div>
            )
          })}
        </div>
      )}
      {data?.length ? (
        <div className={styles.content}>
          {data?.map((item, index) => {
            const disabled = isRecordRowDisabled && isRecordRowDisabled(item)
            return (
              <div
                key={index}
                className={cn(styles.row, disabled && styles.disabled)}
                onDoubleClick={disabled ? noop : () => onDoubleClick(item)}
              >
                {columns.map(({ key, width, render }, idx) => {
                  return (
                    <div key={idx} style={{ width }}>
                      {render(item[key], item, index)}
                    </div>
                  )
                })}
              </div>
            )
          })}
        </div>
      ) : (
        <div className={styles.empty}>暂无数据喔</div>
      )}
    </div>
  )
}

export default Table
